<template>
	<view class="nas-downloadList">
		<view class="nas-downloadList-status" v-if="fileList.length > 0">
			<view class="nas-downloadList-status-left">
				<view class="nas-downloadList-left-item">正在下载({{ fileList.length }})</view>
				<view class="nas-downloadList-left-item">
					<!-- <image src="/static/nas-static/nas-lingt.svg" mode=""></image>
					<view>您正在享受极速传输服务</view> -->
				</view>
			</view>
			<view class="nas-downloadList-status-right" @click="allDownloadTask">{{downloadBtnTitle}}</view>
		</view>
		<!-- 下载列表 -->
		<view class="nas-downloadList-body" v-for="(item, index) in fileList" :key="index">
			<uni-swipe-action class="nas-swiper-left">
				<uni-swipe-action-item autoClose>
					<NasListItem :item="item" :type="type"></NasListItem>
					<template v-slot:right>
						<view class="slot-button" @click="onClick(index)">
							<text class="slot-button-text">{{ swiperName }}</text>
						</view>
					</template>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<u-modal
			v-model="showDeleteModal"
			show-cancel-button
			cancel-color="#333"
			confirm-text="确定"
			confirm-color="#4992ff"
			:title="swiperName"
			:content="`确定${swiperName}所选的文件吗？`"
			@confirm="clickTrueBtn"
			@cancel="clickCancelBtn"
		></u-modal>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import request from '../../utils/request.js';
import NasListItem from '../nas-listItem/nas-listItem.vue';
export default {
	components: {
		NasListItem
	},
	props: {
		type: {
			type: String,
			default: 'download'
		}
	},
	data() {
		return {
			fileList: [], // 上传任务队列
			index: '', //左滑选中index
			swiperName: '', //左滑的文案
			showDeleteModal: false,
			index: '',
			downloadBtnTitle: ''
		};
	},
	computed: {
		...mapState(['nasDownloadList'])
	},
	watch: {
		nasDownloadList: {
			handler(val) {
				this.fileList = [...val];
				// console.log(this.fileList, 'this.fileList');
				// 判断是否全部暂停了
				const hasStart = this.fileList.some(pre => pre.taskStatus === 'start');
				if (hasStart) {
					this.downloadBtnTitle = '全部暂停';
				} else {
					this.downloadBtnTitle = '全部开始';
				}
			},
			immediate: true,
			deep: true
		}
	},
	mounted() {
		if (this.type === 'upload') {
			this.swiperName = '取消上传';
		} else {
			this.swiperName = '取消下载';
		}
	},
	methods: {
		...mapMutations(['nasUploadingListDelete']),
		// 左滑按钮点击
		clickTrueBtn() {
			let task = this.fileList[this.index];
			if (this.type === 'upload') {
				task.cancelUpload();
				this.nasUploadingListDelete(task);
				this.deleteRemoteFile(task);
			} else {
				task.cancelDownload();
			}
			// uni.$emit('clickTrueBtn', this.uploadingList);
			if (this.type === 'upload') {
				// this.$utils.msg('取消上传成功');
			} else {
				// this.$utils.msg('取消下载成功');
			}
		},
		// 取消任务
		clickCancelBtn() {
			this.showDeleteModal = false;
		},
		// 暂停全部下载任务/继续全部下载任务
		allDownloadTask() {
			if (this.downloadBtnTitle == '全部暂停') {
				this.nasDownloadList.forEach(task => {
					task.pauseDownload();
				});
			} else {
				this.nasDownloadList.forEach(task => {
					task.goTo();
				});
			}
		},
		// 删除未上传结束的文件
		deleteRemoteFile(task) {
			const params = {
				method: 'POST',
				url: '/nas/rd_center/data/get',
				data: {
					method: 'capacity.nas.cloud.file.dir.delete',
					type: 1,
					data: {
						directory:
							task.fileInfo.catalogue === '/'
								? task.fileInfo.catalogue + task.fileInfo.name + '.crash'
								: task.fileInfo.catalogue + '/' + task.fileInfo.name + '.crash'
					}
				}
			};
			// console.log(params, '取消上传params');
			request(params);
		},
		// 左滑取消下载、上传
		onClick(index) {
			this.showDeleteModal = true;
			this.index = index;
		}
	}
};
</script>

<style lang="scss" scoped>
@import 'uview-ui/index.scss';
.nas-downloadList {
	position: absolute;
	top: 90rpx;
	bottom: 0;
	right: 0;
	left: 0;
	overflow-y: scroll;
	.nas-downloadList-status {
		margin: 28rpx 32rpx;
		display: flex;
		align-items: center;
		height: 56rpx;
		justify-content: space-between;
		.nas-downloadList-status-left {
			display: flex;
			align-items: center;
		}
		.nas-downloadList-left-item {
			&:first-of-type {
				font-family: HarmonyOS_Sans_SC;
				font-size: 24rpx;
				color: #808080;
				letter-spacing: 0;
				text-align: center;
				font-weight: 400;
			}
			&:last-of-type {
				width: 339rpx;
				height: 56rpx;
				margin-left: 16rpx;
				// background: rgba(219, 153, 40, 0.08);
				border-radius: 30rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				font-family: HarmonyOS_Sans_SC;
				font-size: 24rpx;
				color: #d4ad6c;
				letter-spacing: 0;
				text-align: center;
				font-weight: 400;
				image {
					width: 26rpx;
					height: 32rpx;
				}
			}
		}
		.nas-downloadList-status-right {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 139rpx;
			height: 56rpx;
			background: rgba(48, 105, 220, 0.1);
			border-radius: 28rpx;
			font-family: HarmonyOS_Sans_SC;
			font-size: 24rpx;
			color: #3069dc;
			letter-spacing: 0;
			text-align: center;
			font-weight: 400;
		}
	}
	.nas-downloadList-body {
		display: flex;
		justify-content: center;
		align-items: center;
		// margin: 0 32rpx;
		// padding: 24rpx;
		border-bottom: 1rpx solid #e6e6e6;
	}
	.slot-button {
		display: flex;
		height: 100%;
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0 20px;
		background-color: #4992ff;
		color: #ffffff;
	}
	.nas-swiper-left {
		width: 100% !important;
		padding-right: 32rpx;
	}
}
</style>
